<template>
  <div>
    <!-- 教师管理 -->
    <!-- 卡片 -->
    <el-card class="box-card">
        <!-- 面包屑 -->
        <breadcrumbIndex :breadcrumbs="breadcrumbs"></breadcrumbIndex>
        <el-row class="navTop">
            <el-col :span="18" class="componentsLeft">
                <div class="componentsList">
                    <span>注册时间:</span>
                    <div class="componentsLists1">
                        <datePickers />
                    </div>
                </div>
                 <div class="componentsList">
                    <span>注册渠道:</span>
                    <div class="componentsLists">
                        <selectIndex />
                    </div>
                </div>
                <div class="componentsList">
                    <span>教资认证:</span>
                    <div class="componentsLists">
                        <selectIndex />                      
                    </div>
                </div>
                <div class="componentsList">
                    <span>是否实名:</span>
                    <div class="componentsLists">
                        <selectIndex />                       
                    </div>
                </div>
                <div class="componentsList">
                    <span>所属组织:</span>
                    <div class="componentsLists">
                       <selectIndex />                     
                    </div>
                </div>
                <div class="componentsList">
                    <span>授课科目:</span>
                    <div class="componentsLists">
                        <selectIndex />
                    </div>
                </div>
                <div class="componentsList">
                    <span>状态:</span>
                    <div class="componentsLists">
                        <selectIndex />
                    </div>
                </div>
            </el-col>
            <el-col :span="6" class="sousuo">
                <div class="iputDiv">
                    <inputIndex />
                </div>
                <el-button size="mini" type="primary" @click="addTeacher(true)">添加教师</el-button>
            </el-col>
        </el-row>
        <!-- 表格 -->
        <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%">
        <el-table-column
            prop="CreateDate"
            label="日期"
            width="180">
        </el-table-column>
        <el-table-column
            prop="Province"
            label="姓名"
            width="180">
        </el-table-column>
        <el-table-column
            prop="District"
            label="地址">
        </el-table-column>
        <el-table-column
            prop="District"
            label="操作">
            <template slot-scope="scope">
            <el-button @click="teacherClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small" @click="editTeacher(false)">编辑</el-button>
        </template>
        </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <pageBox @pagintionlist='pagintionlist2' :pagination='paginations'></pageBox>
    </el-card>

    <!-- 添加教师对话框  -->
    <dialogIndex @childFn='teacher' :hiddens="teacherObj">
        <!-- 添加教师表单 -->
        <el-form :model="teacherForm" :rules="teacherRules" ref="teacherForm" label-width="100px" class="demo-ruleForm">
            <el-form-item v-if="!showTeacher" label="账号id：">
                <span>{{teacherForm.userId}}</span>
            </el-form-item>
            <el-form-item label="手机号：" prop="phone">
                <div  class="verificationForm">
                    <el-input v-model="teacherForm.phone" placeholder="请输入手机号"></el-input>
                    <div>
                        <span v-if="!showTeacher" @click="changePhoneButton">更换手机号</span>
                    </div>
                </div>
            </el-form-item>
            <el-form-item  v-if="showTeacher" label="验证码：" prop="verification">
                <div  class="verificationForm">
                    <el-input v-model="teacherForm.verification" placeholder="请输入验证码"></el-input>
                    <el-button  size="mini" type="primary">获取验证码</el-button>
                </div>
            </el-form-item>
            <el-form-item  v-if="showTeacher" label="登录密码：" prop="loginPassword">
                <el-input v-model="teacherForm.loginPassword" placeholder="请输入登录密码"></el-input>
            </el-form-item>
            <el-form-item label="昵称：" prop="nickname">
                <el-input v-model="teacherForm.nickname" placeholder="请输入昵称"></el-input>
            </el-form-item>
            <el-form-item label="性别：" prop="sex">
               <el-radio v-model="teacherForm.sex" label="1">男</el-radio>
                <el-radio v-model="teacherForm.sex" label="2">女</el-radio>
            </el-form-item>
            <el-form-item label="地区：" prop="region">
                <cascaderIndex />
            </el-form-item>
            <el-form-item label="授课科目：" prop="teachingSubjects">
                <div class="teachingSubjects">
                <el-button size="mini" type="primary" @click="addTeacher">教师</el-button>
                <el-button size="mini" type="primary" @click="addTeacher">教师</el-button>
                <el-button size="mini" type="primary" @click="addTeacher">教师</el-button>
                <el-button size="mini" type="primary" @click="addTeacher">添加教师</el-button>
                <el-button size="mini" type="primary" @click="addTeacher">添加教师</el-button>
                <el-button size="mini" type="primary" @click="addTeacher">添加教师</el-button>
                <el-button size="mini" type="primary" @click="addTeacher">添加教师</el-button>
                </div>
            </el-form-item>
             <el-form-item label="所属组织：" prop="organisation">
               <treeIndex />
            </el-form-item>
            <el-form-item label="状态：" prop="code">
               <el-radio v-model="teacherForm.code" label="1">启用</el-radio>
                <el-radio v-model="teacherForm.code" label="2">停用</el-radio>
            </el-form-item>
        </el-form>
    </dialogIndex>

    <!-- 更换手机号对话框  -->
    <dialogIndex @childFn='changePhone' :hiddens="changePhoneObj">
        <!-- 添加教师表单 -->
        <el-form :model="changePhoneForm" :rules="changePhoneRules" ref="changePhoneForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="手机号：">
                <span>{{changePhoneForm.phone}}</span>
            </el-form-item>
            <el-form-item label="新手机号：" prop="newPhone">
                <div  class="verificationForm">
                    <el-input v-model="changePhoneForm.newPhone" placeholder="请输入手机号"></el-input>
                    <div>
                        <!-- <span v-if="!showTeacher" @click="changePhone">更换手机号</span> -->
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="验证码：" prop="verification">
                <div  class="verificationForm">
                    <el-input v-model="changePhoneForm.verification" placeholder="请输入验证码"></el-input>
                    <el-button  size="mini" type="primary">获取验证码</el-button>
                </div>
            </el-form-item>
        </el-form>
    </dialogIndex>
  </div>
</template>

<script>
import breadcrumbIndex from "@/components/commons/Breadcrumb/breadcrumb.vue"//面包屑
import treeIndex from '@/components/commons/Tree/index.vue'//树形控件
import datePickers from '@/components/commons/Date/datePickers.vue'//日期范围控件
import selectIndex from '@/components/commons/Selects/selects.vue'//选择器控件
import inputIndex from '@/components/commons/Inputs/inputs.vue'//输入框控件
import pageBox from '@/components/commons/Pagination/index.vue'//分页器
import dialogIndex from '@/components/commons/Dialog/index.vue'//公共对话框
import dialogBox from '../campusManagement/components/dialog'//当前模块的对话框
import {getUserList} from '@/api/user.js'//接口
import cascaderIndex from '@/components/commons/Cascader/cascader.vue'//级联
import {FormValidate} from "@/api/rules.js"

export default {
  name: 'teacherManagement',
  components:{
      breadcrumbIndex,
      treeIndex,
      datePickers,
      selectIndex,
      inputIndex,
      pageBox,
      dialogIndex,
      cascaderIndex,
      dialogBox
  },
  data(){
      return{
        //   向面包屑子组件传递值
          breadcrumbs:{},
        //   表格
        tableData: [],
        //   分页器对象
        paginations:{},
        // 添加教师对话框对象
        teacherObj:{},
        changePhoneObj:{},//更新手机号对话框对象
        showTeacher:true,//添加和编辑的差别字段
        // 添加教师表单对象
        teacherForm:{
            userId:12345678,//账号id
            phone:'',//手机号
            verification:'',//验证码
            loginPassword:'',//登录密码
            nickname:'',//昵称
            sex:'1',
            region:'',//地区
            teachingSubjects:'',//授课科目
            organisation:'',//所属组织
            code:'1',//状态
        },
        // 添加教师表单验证规则
        teacherRules:{
            phone:[
                { required: true,validator:FormValidate().validatePhone, trigger: 'blur' }
            ],
            verification:[
                { required: true, message: '请输入验证码', trigger: 'blur' },
                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            loginPassword:[
                { required: true, message: '请输入登录密码', trigger: 'blur' },
                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            nickname:[
                { required: true, message: '请输入昵称', trigger: 'blur' },
                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
        },
        // 更换手机号表单对象
        changePhoneForm:{
            phone:'15893141235',//旧手机号
            newPhone:'',//新手机号
            verification:''//验证码
        },
        // 更换手机号验证规则
        changePhoneRules:{
            phone:[
                { required: true,validator:FormValidate().validatePhone, trigger: 'blur' }
            ],
            newPhone:[
                { required: true,validator:FormValidate().validatePhone, trigger: 'blur' }
            ],
            verification:[
                { required: true, message: '请输入验证码', trigger: 'blur' },
                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ]
        }
      }
  },
  methods:{
// =========================================================================================
    //   传递面包屑的值
      breadcrumbObj(){
          this.breadcrumbs={
              name1:'用户管理',
              name2:'用户管理',
          }
      },
// ===========================================================================================
    //   获取表格
      getTabList(val){
           getUserList({
            queryText:'',
            memberTypeID:'',
            pageIndex:val.current-1,
            pageSize:val.num
        }).then(res=>{
            console.log(res)
            this.tableData=res.data
            // 给子组件传递参数
            this.paginations={
              pageIndex:val.current,//当前显示第几页数
              pageSize:val.num,//每页显示几条数据
              total:res.rowsCount,//总共多少条数据
            }
        })
      },
      //   接收子传递过来的页码对象
    pagintionlist2(obj){
    //   调用渲染表格
        this.getTabList(obj);
    },
// ============================================================================================
// 点击添加和编辑按钮，打开同一个对话框

    // 点击添加教师按钮
    addTeacher(val){
        this.showTeacher=val
        this.teacherObj={
            visible:true,//显示对话框
            title:'添加教师',//对话框的标题
            width:'35%',//对话框的宽度
        }
    },
    // 点击编辑按钮
    editTeacher(val){
        this.showTeacher=val
        this.teacherObj={
            visible:true,//显示对话框
            title:'编辑教师',//对话框的标题
            width:'35%',//对话框的宽度
        }
    },
    // 添加教师接收对话框传递的值
    teacher(val){
        console.log(val)
        // 点击了确定按钮
        if(val=='sub'){
            // 表单预验证
            this.$refs.teacherForm.validate(valid=>{
                if(!valid) return;
                this.$message.success('添加成功');
                this.teacherObj.visible=false;
                // 重置表单
                this.$refs.teacherForm.resetFields();
            })
        }else{
            this.$refs.teacherForm.resetFields();
        }
    },
// ==========================================================================================
    // 点击 更换手机号按钮
    changePhoneButton(){
        this.changePhoneObj={
            visible:true,//显示对话框
            title:'更换手机号',//对话框的标题
        }
    },
    // 更换手机号接收对话框传递的值
    changePhone(val){
        console.log(val)
        // 点击了确定按钮
        if(val=='sub'){
            // 表单预验证
            this.$refs.changePhoneForm.validate(valid=>{
                if(!valid) return;
                this.$message.success('更换成功');
                this.changePhoneObj.visible=false;
                // 重置表单
                this.$refs.changePhoneForm.resetFields();
            })
        }else{
            this.$refs.changePhoneForm.resetFields();
        }
    },
// ==========================================================================================
    // 操作按钮
    teacherClick(row){
        console.log(row)
    }
  },
  created(){
      this.breadcrumbObj()
      this.getTabList({current:0,num:10})
  }
}
</script>

<style lang="less" scoped>

.navTop{
    display: flex;
    align-items: center;
}
.componentsLeft{
    display: flex;
    flex-wrap: wrap;
    .componentsList{
        display: flex;
        align-items: center;
        margin-right: 20px;
        span{
            // flex:1;
            font-size: 14px;
        }
        .componentsLists{
            display: flex;
            align-items: center;
            width: 120px;
            margin: 10px 0;
        }
        // .componentsLists1{
        //     display: flex;
        //     align-items: center;
        // }
    }
}
.sousuo{
    display: flex;
    .iputDiv{
        margin-right: 10px;
    }
}
.teachingSubjects{
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    .el-button{
        margin:0 20px 20px 0;
    }
}
.verificationForm{
    display: flex;
    div{
        display: block;
        width: 100%;
        color: blue;
    }
    .el-input{
        margin-right: 10px;
    }
}
</style>
